<template>
  <div>
    <el-container class="main-box">
      <el-header>
        <div class="head">
          <div class="head-left">
            <div v-show="name_list.length" class="f-s-20">
              <span>关于</span>
              <span class="f-w-700">{{ name_list.join('与') }}</span>
              <span>的对比</span>
            </div>
            <div class="compared cursor-p" @click="handleCompared">
              <span>更多人员对比 ></span>
            </div>
          </div>
          <div class="head-right">
            <!--                      时间选择器-->
            <div v-show="compared_type == 1" class="time-select-box">
              <div class="time-select-head">更多年度职责</div>
              <el-select @change="handleSelectTime"
                         v-model="time_value" multiple placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </div>
            <button class="btn-switch cursor-p"
                    @click="handleChange">
              <svg-icon class="f-s-16"
                        style="color: #FFFFFF" :icon-class="is_switchover === 0?'appraiseheng':'appraisezong'"/>
              {{ is_switchover === 0 ? '纵向布局' : '横向布局' }}
            </button>
            <button class="btn-unified cursor-p" @click="handleExport">
              <svg-icon class="f-s-16"
                        style="color: #1966E2" icon-class="appraiseout"/>
              导出
            </button>
            <button class="btn-unified cursor-p" v-if="false">
              <img src="@/assets/appraise/icon/contrast_dayin.png" alt="">
              打印
            </button>
          </div>
        </div>
      </el-header>
      <el-main ref="Box">
        <div class="content my-duty">
          <people-across v-if="compared_type == 0 && is_change_table === 0"
                         title="职责"
                         :compared_list="compared_list"/>
          <person-endlong v-if="compared_type == 0 && is_change_table === 1"
                          title="职责"
                          :compared_list="compared_list"/>
          <department-across v-if="compared_type == 1 && is_change_table === 0"
                             :compared_list="compared_list"/>
          <department-endlong v-if="compared_type == 1 && is_change_table === 1"
                              :compared_list="compared_list"/>
          <div class="kong-state" v-show="compared_type === 2">
            <div class="flex f-dir align-center kong-box">
              <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
              <div class="kong-text">选择后再查看内容哦~</div>
            </div>
          </div>
        </div>
        <!--  穿梭框  -->
<!--        <shuttle-box :isShow="isShow" @shut="shut"-->
<!--                     :personnel_list="personnel_list"-->
<!--                     @allShuttleBox="allShuttleBox"-->
<!--        />-->

        <Transfer v-model="transferShow" :compareIds="compare_id" :personList="personnel_list" @allShuttleBox="allShuttleBox" />

      </el-main>
    </el-container>
  </div>
</template>
<script>
import PeopleAcross from '@/appraise/components/PeopleAcross'
import PersonEndlong from '@/appraise/components/PersonEndlong'
import DepartmentAcross from '@/appraise/components/DepartmentAcross'
import DepartmentEndlong from '@/appraise/components/DepartmentEndlong'
import ShuttleBox from '@/appraise/components/ShuttleBox'

import Transfer from '@/appraise/components/Transfer'

import {fileDownload, syncRequest} from '@/utils/httpRequet'

export default {
  components: {
    PeopleAcross,
    PersonEndlong,
    DepartmentAcross,
    DepartmentEndlong,

    ShuttleBox,

    Transfer
  },
  data() {
    return {
      transferShow: false,
      // printContent: { //打印
      //   id: "print",  //打印标签的id
      //   popTitle: 'Document',  //文件标题
      //   extraCss: 'https://www.google.com,https://www.google.com',
      //   extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
      // },
      type: 0,
      hide_position: 30,
      compare_id: [],
      name_list: [],//对比人或部门
      is_switchover: 0,
      is_change_table: 2,
      compared_list: [], //对比列表

      compared_type: 2, //对比类型
      yearList: [],
      isShow: false,
      personnel_list: [],//人员穿梭框数据
      options: [
        String(new Date().getFullYear()),
        String(new Date().getFullYear() - 1),
        String(new Date().getFullYear() - 2),
      ], //时间选择器
      time_value: [],
      is_loading: false,
    }
  },
  mounted() {
    const res = syncRequest({ url: 'pubGetDeptUserTree', })
    if (res.errorCode == '1') {
      this.personnel_list = res.data   // [0].children
    }

    const this_year = new Date().getFullYear()
    this.yearList.push(String(this_year))
    this.compare_id = this.$store.state.appraise.compared
    this.compared_type = this.$store.state.appraise.type
    this.$store.commit('appraise/DELETE_ID')
    this.compared_type === 0 ? this.initUser() : this.initDept(this.yearList)
  },
  destroyed() {
    sessionStorage.removeItem("ShuttleBoxData");
  },
  methods: {
    //初始加载人员
    initUser() {
      const res = syncRequest({
        url: 'userCompareDuty',
        method: 'POST',
        data: {
          userIdList: this.compare_id,
          yearList: this.yearList,
        }
      })
      if (res.errorCode == '1') {
        this.is_change_table = 2
        this.name_list = []
        this.compared_list = res.data[0]
        this.compared_list.forEach(res => {
          this.name_list.push(res.userName)
        })
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    //初始加载部门
    initDept(year) {
      const res = syncRequest({
        url: "deptCompareDuty",
        method: "POST",
        data: {
          deptIdList: this.compare_id,
          yearList: year,
        },
      });
      if (res.errorCode == "1") {
        this.is_change_table = 2
        this.name_list = []
        this.compared_list = res.data
        this.compared_list.forEach(res => {
          this.name_list.push(res[0].deptName)
        })
        setTimeout(()=> {
          this.is_change_table = this.is_switchover
        },200)
      }
    },
    /**
     * @name 选择时间
     */
    handleSelectTime(e) {
      if (this.time_value.length) {
        this.initDept(this.time_value)
      } else {
        this.initDept(this.yearList)
      }
    },
    /**
     * @name 打开穿梭框
     */
    handleCompared() {
      this.transferShow = true
    },
    //关闭弹窗
    shut(vla) {
      this.isShow = vla
    },
    //穿梭框子组件向父组件传参
    allShuttleBox(val) {
      console.log( 'val --' , val)
      this.type = val[0].type
      this.compare_id = []
      this.time_value = []
      val.forEach(res => this.compare_id.push(res.id))
      this.compared_type = this.type === '2' ? 0 : 1
      this.type === '2' ? this.initUser() : this.initDept(this.yearList)
    },
    /**
     * @name 改变布局
     */
    handleChange() {
      this.is_switchover = this.is_switchover === 0 ? 1 : 0
      this.is_change_table = this.is_switchover
    },
    /**
     * @name 导出
     */
    handleExport() {
      if (!this.is_loading) {
        this.is_loading = true
        if (this.type === '2') {
          fileDownload("userExpCompareDuty", {
            param: {
              userIdList: this.compare_id,
              yearList: this.yearList,
              direction: this.is_switchover === 0 ? 'transverse' : 'portrait'
            }
          })
        } else {
          fileDownload("deptExpCompareDuty", {
            param: {
              deptIdList: this.compare_id,
              yearList: this.time_value.length ? this.time_value : this.yearList,
              direction: this.is_switchover === 0 ? 'transverse' : 'portrait'
            }
          })
        }
        setTimeout(() => {
          this.is_loading = false
        }, 2000)
      }
    },
  }
}
</script>

<style scoped>
.el-main {
  background-color: #F0F0F3;
  color: #333;
}

.el-header {
  height: auto !important;
  background-color: #F0F0F3;
  color: #333;
  margin-right: 10px;
  padding-bottom: 10px !important;
}

.main-box {
  width: 100%;
  user-select: none;
  padding: 10px 0 10px 10px;
  font-family: "Microsoft Yahei";
  background-color: #F0F0F3;
}

.cursor-p {
  cursor: pointer;
}

.f-s-20 {
  font-size: 20px;
}

.f-s-16 {
  font-size: 16px;
}

.f-w-700 {
  font-weight: 700;
}

.cursor-p {
  cursor: pointer;
}

.flex {
  display: flex;
}

.f-dir {
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.my-duty {
  margin-right: 10px;
  border-radius: 4px;
}

::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 2px .4em;
  border-radius: 999em;
}

::v-deep .el-select {
  height: 36px;
}

::v-deep .el-input__inner {
  height: 36px !important;
}

::v-deep .el-select__tags {
  max-width: 140px !important;
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head-left {
  display: flex;
  align-items: center;
}

.compared {
  font-family: PingFangSC;
  margin-left: 41px;
  font-size: 16px;
  color: #1C65E3;
}

.head-right {
  display: flex;
  align-items: center;
}

.head-right > button > img {
  width: 15px;
  height: 15px;
}

.head-right > button {
  margin-left: 15px;
  font-size: 16px;
}

.head-right > p:nth-child(1) {
  margin-right: 5px;
}

.head-right > p:nth-child(3) {
  margin-left: 5px;
}

.time-select-box {
  display: flex;
  align-items: center;
  position: relative;
  right: 4.5rem;
}

.time-select-head {
  font-size: 16px;
  color: #666666;
  margin-right: 18px;
}

.btn-switch {
  width: 100px;
  height: 35px;
  opacity: 1;
  background: #1a66e2;
  border-radius: 6px;
  color: #fff;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.btn-unified {
  width: 75px;
  height: 35px;
  background: #ffffff;
  border: 1px solid #1c66e2;
  border-radius: 7px;
  color: #1c66e2;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.content {
  height: calc(100vh - 186px);
  background-color: #FFFFFF;
}

/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 19px;
}

.kong-text {
  font-size: 18px;
  color: rgba(153, 153, 153, 1);
}

@media (max-width: 1024px) {
  .time-select-head {
    font-size: 14px;
    color: #666666;
    margin-right: 18px;
  }

  .f-s-20 {
    font-size: 18px;
  }

  .f-s-16 {
    font-size: 14px;
  }

  .compared {
    font-family: PingFangSC;
    margin-left: 41px;
    font-size: 14px;
    color: #1C65E3;
  }

  .head-right > button {
    margin-left: 15px;
    font-size: 14px;
  }

  .kong-text {
    font-size: 16px;
    color: rgba(153, 153, 153, 1);
  }
}
</style>
